<template>
	<view class="page">
		<u-sticky :offsetTop="0">
			<view class="head-search">
				<u-search borderColor="#DDDDDD" v-model="keyword" height="36"
					bgColor="#eee" :showAction="false" :searchIconSize="20" placeholderColor="#BDBDBD" placeholder="输入页面路径"
					@search="handleSearch"></u-search>
			</view>
		</u-sticky>
		
		
	
		<view class="page-ctx">
			<view class="route-list">
				<view class="group-item">
					<view class="group-name">
						tabbar页面
					</view>
					<view class="route-item">
						<u-cell-group>
							<u-cell v-for="(route, index) in tabBarList" :title="route" :label="route" rightIcon="arrow-right"
								@click="toTabBar(route)"></u-cell>
						</u-cell-group>
					</view>
				</view>

				<view class="group-item">
					<view class="group-name">
						【主包】路由
					</view>
					<view class="route-item">
						<u-cell-group>
							<u-cell v-for="(value, key, index) in pageMain" :title="index +' '+ value.title" :label="index +' '+  value.route" isLink
								:url="'/' +value.route" rightIcon="arrow-right" :data-index="index"></u-cell>
						</u-cell-group>
					</view>
				</view>


				<view class="group-item">
					<view class="group-name">
						【分包】路由
					</view>
					<view class="route-item">
						<u-cell-group>
							<u-cell v-for="(value, key, index) in pagePkg" :title="index +' '+ value.title" :label="index +' '+  value.route" isLink
								:url="'/' +value.route" rightIcon="arrow-right" :data-index="index"></u-cell>
						</u-cell-group>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/plugin/routes.js'

	export default {
		components: {

		},
		data() {
			return {
				routePathMap: {},
				pageMain: {},
				pagePkg: {},
				tabBarList: [],
				
				keyword: ''
			}
		},
		watch: {

		},
		onLoad(option) {
			this.setView();

		},
		onShow() {
			var info = getCurrentPages();
			console.warn('页面信息', info)
		},
		methods: {
			setView() {
				this.routePathMap = config.routePathMap;
				this.tabBarList = config.tabBarList;

				let pageMain = {}
				let pagePkg = {}
				for (var key in this.routePathMap) {
					let item = this.routePathMap[key]
					if (item.type == 'main') {
						pageMain[key] = item;
					} else {
						pagePkg[key] = item;
					}
				}

				this.pageMain = pageMain
				this.pagePkg = pagePkg

				this.$logjson('routes.vue routePathMap 所有路由', this.routePathMap)
				this.$logjson('routes.vue pageMain 主包路由', this.pageMain)
				this.$logjson('routes.vue pagePkg 分包路由', this.pagePkg)
				this.$logjson('routes.vue tabBarList 底部tabbar', this.tabBarList)
			},

			toTabBar(route) {
				this.toRoute(route)
			},
			
			
			
			
			handleSearch() {
				if (!this.keyword) {
					return this.$alert('请输入搜索内容')
				}
				this.toRoute({
					path: this.keyword,
					query: {
						
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.head-search {
		padding: 12rpx;
		background: #fff;
	}
	
	.page-ctx {
		position: relative;
		z-index: 10;
		padding: 24rpx;
		// padding-top: 120rpx;
	}

	.group-name {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		background: #DDD;
		padding: 16rpx;
	}

	.group-item {
		margin-bottom: 50rpx;
	}
</style>